<!--
 * @Descripttion: 字典管理
 * @version: 
 * @Author: wl
 * @Date: 2020-06-10 17:38:39
 * @LastEditors: wl
 * @LastEditTime: 2020-07-24 17:28:59
--> 

<template>
  <div>
    <page :asideShow="asideShow">
      <div slot="toolbar">
        <el-form
          :inline="true"
          :model="filters"
          label-width="90px"
          label-position="right"
        >
          <el-form-item label="名称：">
            <el-input
              class="normal"
              placeholder="请输入查询内容"
              clearable
              v-model="filters.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="选择类型：">
            <el-select
              filterable
              clearable
              placeholder="选择类型"
              v-model="filters.DTID"
            >
              <el-option
                v-for="item in options"
                :key="item.DTID"
                :label="item.name"
                :value="item.DTID"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button @click="handleQuery()">查询</el-button>
            <el-button type="primary" @click="handleAdd">新增</el-button>
            <el-button type="success" @click="handleUpload">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--工具栏-->
      <div slot="content">
        <el-table
        :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
          :data="pageResult"
          stripe
          v-loading="loading"
          style="width: 100%"
          element-loading-text="加载中..."
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column
            prop="name"
            header-align="center"
            align="center"
            label="字典名"
          ></el-table-column>

          <el-table-column
            prop="describe"
            header-align="center"
            align="center"
            label="描述"
          ></el-table-column>
          <el-table-column
            prop="type"
            header-align="center"
            align="center"
            label="字典类型"
          ></el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="250"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="primary" @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button type="danger" @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-button
          :disabled="selections.length === 0"
          type="danger"
          style="float: left"
          @click="batchDelete"
          >批量删除</el-button
        >
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          :page-size="pageRequest.limit"
          :total="totalSize"
          style="float: right"
        ></el-pagination>
      </div>
    </page>
    <!--新增编辑界面-->
    <el-dialog
      :title="operation ? '新增' : '编辑'"
      width="40%"
      :visible.sync="dialogVisible"
    >
      <el-form :model="dataForm" label-width="80px" ref="dataForm">
        <el-form-item label="字典类型" prop="dType">
          <el-select
            filterable
            clearable
            placeholder="选择类型"
            v-model="dataForm.DTID"
          >
            <el-option
              v-for="item in options"
              :key="item.DTID"
              :label="item.name"
              :value="item.DTID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字典名" prop="name">
          <el-input v-model="dataForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述 " prop="describe">
          <el-input v-model="dataForm.describe" auto-complete="off"></el-input>
        </el-form-item>

        <!-- groupName -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click.native="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import KtTable from "@/views/Core/KtTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
export default {
  components: {
    KtTable,
    KtButton,
  },
  data() {
    return {
      flag: false,
      size: "small",
      loading: false,
      filters: {
        name: "",
        DTID: "",
        dValue: "",
        endTime: "",
      },

      // 新增编辑界面数据
      dataForm: {
        DTID: "",
        name: "",
        describe: "",
        DID: "",
      },
      asideShow: false,
      columns: [
        { prop: "id", label: "ID", minWidth: 60 },
        { prop: "userName", label: "用户名", minWidth: 100 },
        // {prop:"operation", label:"操作", minWidth:120},
        { prop: "method", label: "方法", minWidth: 180 },
        { prop: "params", label: "参数", minWidth: 220 },
        { prop: "ip", label: "IP", minWidth: 120 },
        { prop: "time", label: "耗时", minWidth: 80 },
        { prop: "createBy", label: "创建人", minWidth: 100 },
        {
          prop: "createTime",
          label: "创建时间",
          minWidth: 120,
          formatter: this.dateFormat,
        },
        // {prop:"lastUpdateBy", label:"更新人", minWidth:100},
        // {prop:"lastUpdateTime", label:"更新时间", minWidth:120, formatter:this.dateFormat}
      ],
      pageRequest: { page: 1, limit: 10 },
      totalSize: 0,
      pageResult: [],
      showOperation: false,
      selections: [],
      operation: false,
      dialogVisible: false,
      options: [],
    };
  },
  methods: {
    // 获取分页数据
    handleQuery: function () {
      let params = {
        CID: "510105480000-001",
        // where: {
        //   name: this.filters.name,
        //   DTID: this.filters.DTID
        // },
        // page: this.pageRequest.page,
        // limit: this.pageRequest.limit
      };

      let paramJson = JSON.stringify(params);
      this.loading = true;
      this.$api.system.findPage(paramJson).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          this.pageResult = res.data;
          this.totalSize = res.count;
          var list = [];
          if ((this.pageResult == !isNaN)) {
            this.pageResult.map((item) => {
              item.type = item.dType[0].name;
            });
          }
        } else {
          this.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },
    // 获取字典类型
    dictType() {
      let params = {
        page: this.pageRequest.page,
        limit: this.pageRequest.limit,
      };
      let paramJson = JSON.stringify(params);
      this.$api.dict.findPageType(paramJson).then((res) => {
        if (res.code == 0) {
          this.options = res.data;
        } else {
          this.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },

    //去重复后的集合
    listPush(res) {
      var tem = [];
      //数组元素去重
      return tem;
    },
    // 显示新增界面
    handleAdd: function () {
      this.dialogVisible = true;
      this.operation = true;
      this.dataForm = {
        DTID: "",
        name: "",
        describe: "",
        DID: "",
      };
    },
    handleUpload: function () {},
    // 显示编辑界面
    handleEdit: function (params) {
      this.dialogVisible = true;
      this.operation = false;
      this.dataForm = Object.assign({}, params);
      console.log(this.dataForm);
    },
    //删除
    handleDelete(row) {
      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning",
      }).then(() => {
        // let params = this.getDeleteIds([], row);
        let params = {
          DID: row.DID,
        };

        var paramJson = JSON.stringify(params);
        this.$api.dict.batchDelete(paramJson).then((res) => {
          if (res.code == 0) {
            this.handleQuery();
            this.$message({
              message: "删除成功",
              type: "success",
            });
          } else {
            this.$message({
              message: "操作失败, " + res.msg,
              type: "error",
            });
          }
        });
      });
    },
    // 批量删除
    batchDelete() {
      this.$confirm("确认删除选中用户吗？", "提示", "warning").then(() => {
        let selLength = this.selections.length;
        let totalLength = this.pageResult.length;
        let isReduce = selLength == totalLength ? true : false;
        let params = this.selections
          .map((item) => {
            return item.DID;
          })
          .join(",");
        this.$api.dict
          .batchDelete({
            DID: params,
          })
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("删除成功");
              if (isReduce) {
                this.pageRequest.page--;
              }
              this.handleQuery();
            } else {
              this.$message.error(res.msg);
            }
          });
      });
    },
    // 编辑
    submitForm: function () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            // let params = Object.assign({}, this.dataForm);let password = this.$md5(this.loginForm.password);

            // let params = Object.assign(this.dataForm);
            let params = {
              DTID: this.dataForm.DTID,
              name: this.dataForm.name,
              describe: this.dataForm.describe,
              _id: this.dataForm._id,
              DID: this.dataForm.DID,
              insertTime: this.dataForm.insertTime,
            };

            let paramJson = JSON.stringify(params);
            this.$api.dict.save(paramJson).then((res) => {
              this.editLoading = false;
              if (res.code == 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
                this.dialogVisible = false;
                this.$refs["dataForm"].resetFields();
              } else {
                this.$message({
                  message: "操作失败, " + res.msg,
                  type: "error",
                });
              }
              this.handleQuery(null);
            });
          });
        }
      });
    },
    refreshPageRequest(page) {
      this.pageRequest.page = page;
      this.handleQuery();
    },
    handleSelectionChange(val) {
      this.selections = val;
    },

    // 时间格式化
    dateFormat: function (row, column, cellValue, index) {
      return format(row[column.property]);
    },
  },
  mounted() {
    this.handleQuery();
    // this.dictType();
  },
};
</script>

<style scoped>
.el-select {
  width: 100%;
}
</style>